<template>
  <div class="DFModalKeyboard">
    <div class="DFModalKeyboardInput">
      <n-input
        v-if="virtualKeyboard"
        class="DFModalKeyboardInput-input"
        ref="dfModalKeyboardInput"
        :placeholder="props.placeholder"
        :value="props.value"
        :maxlength="props.maxlength"
        :readonly="true"
        :type="props.type"
        :showPasswordOn="props.showPasswordOn"
        @click="clickFn"
        @focus="() => null"
        @blur="() => null"
      >
        <template v-for="(_, slot) in $slots" #[slot]>
          <slot :name="slot"></slot>
        </template>
      </n-input>

      <n-input-number
        class="DFModalKeyboardInput-input"
        v-else-if="inputType === 'number'"
        :placeholder="props.placeholder"
        :min="props.min"
        :max="props.max"
        :value="numberVal"
        :show-button="false"
        :precision="props.precision || 0"
        @focus="focusFn"
        @update:value="updateValueFn"
        @blur="blurFn"
      >
        <template v-for="(_, slot) in $slots" #[slot]>
          <slot :name="slot"></slot>
        </template>
      </n-input-number>

      <n-input
        v-else
        class="DFModalKeyboardInput-input"
        :placeholder="props.placeholder"
        :value="props.value"
        :type="props.type"
        :showPasswordOn="props.showPasswordOn"
        :inputProps="props.inputProps"
        :maxlength="props.maxlength"
        @focus="focusFn"
        @update:value="updateValueFn"
        @blur="blurFn"
      >
        <template v-for="(_, slot) in $slots" #[slot]>
          <slot :name="slot"></slot>
        </template>
      </n-input>
    </div>

    <DFModal
      v-if="virtualKeyboard"
      :width="800"
      ref="basicModalRef"
      class="basicModal DFModalKeyboardModal"
      @register="modalRegister"
      @on-ok="okModalFn"
    >
      <template #default>
        <DFKeyboardInput
          ref="dfKeyboardInput"
          :inputType="props.inputType"
          :maxlength="props.maxlength"
          :value="inputValue"
          :precision="props.precision"
          :type="props.type"
          @update:value="updateInputValueFn"
        />
      </template>
    </DFModal>
  </div>
</template>

<script lang="ts" setup name="DFModalKeyboard">
import DFKeyboardInput from '@/components/DFKeyboardInput/index.vue';

import { DFModal, useModal } from '@/components/DFModal';

import { t } from '@/i18n';

import { useMessage } from 'naive-ui';

import { useUserStore } from '@/store/modules/user';

import { setValFn } from '@/utils/core';

const userStore = useUserStore();

const virtualKeyboard = computed(() => userStore.virtualKeyboard);

type Props = {
  value?: any;
  inputType?: string;
  maxlength?: number;
  min?: any;
  max?: any;
  placeholder?: any,
  precision?: any,
  type?: any,
  showPasswordOn?: any,
  onUpdateValue?: Fn,
  focus?: Fn,
  inputProps?:any
};

const props = withDefaults(defineProps<Props>(), {
  inputType: () => 'text',
  maxlength: () => 250,
  value: () => '',
  min: () => undefined,
  max: () => undefined,
  placeholder: () => t('common.form.plInput'),
  precision: () => 1,
  type: () => 'text',
  showPasswordOn: () => 'click',
  onUpdateValue: () => null,
  focus:()=>null,
  inputProps:()=>undefined
});

const numberVal = computed(() => {
  const numVal: any = (props.value === '' || props.value === undefined || props.value === null) ? undefined : Number(props.value);

  return isNaN(numVal) ? undefined : numVal;
});

const message = useMessage();

const inputValue: any = ref('');

const dfKeyboardInput: any = ref(null);

const dfModalKeyboardInput: any = ref(null);

const numTitle = computed(() => {
  const { min = null, max = null } = props;

  if (min !== null && max !== null) {
    return ` ${min} - ${max}`;
  }

  return '';
});

const [modalRegister, { openModal, closeModal, setSubLoading }] = useModal({
  title: t('common.form.plInput') + numTitle.value
});

const emit = defineEmits(['update:value', 'register', 'okFn','blur']);

const clickFn = () => {
  // console.log(inputValue)
  // console.log(props.value)
  // inputValue.value = '';
  inputValue.value = props.value;

  openModal();
};

const blurFn = () => {
  emit('blur');
}

const focusFn = () => {
  props.focus && props.focus();

  // updateValueFn(numberVal.value)
}

const updateValueFn = value => {
  if (props.onUpdateValue) {
    const isChange = props.onUpdateValue(setValFn(props.inputType, value, false, props.precision));

    if (isChange === false) {
      return false
    }
    console.log(isChange)
  }

  emit('update:value', setValFn(props.inputType, value, false, props.precision));
};

const updateInputValueFn = value => {
  inputValue.value = value;
};

const okModalFn = () => {
  const { inputType = 'text', precision = 2 } = props;

  // const precision:any = props?.precision || 0;

  let value = dfKeyboardInput.value.inputValue;

  if (inputType === 'number') {
    const { min = null, max = null } = props;

    if (value && value.length) {
      const t = value.charAt(value.length - 1);

      if (t === '.') {
        value += '0';
      }

      value = Number(value).toFixed(precision||0).toString();
    }

    if (min !== null && max !== null) {
      const numVal = Number(value);

      if (numVal < min || numVal > max || isNaN(numVal)) {
        message.error(t('common.form.plInput') + numTitle.value);

        setSubLoading(false);

        return;
      }
    }
  }

  closeModal();

  if (![undefined,null].includes(value)) {
    updateValueFn(value);

    inputValue.value = value;

    nextTick(() => {
      emit('okFn',value);
    });
  }
};
</script>

<style lang="less">
.DFModalKeyboardModal .hg-layout-default {
  visibility: visible !important;
}
</style>
